<script setup lang="ts">
import { seoConfig } from '~/config/seo'

useSeoMeta({
  title: seoConfig.auth.quickLogin.title,
  description: seoConfig.auth.quickLogin.description,
  keywords: seoConfig.auth.quickLogin.keywords
})

const advantages = [
  { icon: 'lucide:zap', title: '极速登录', description: '无需输入账号密码，一键完成登录' },
  { icon: 'lucide:shield-check', title: '运营商认证', description: '基于运营商网关认证，安全可靠' },
  { icon: 'lucide:trending-up', title: '提升转化', description: '降低注册流失率，提升用户转化' },
  { icon: 'lucide:smartphone', title: '体验优秀', description: '流畅的用户体验，提升用户满意度' },
  { icon: 'lucide:code', title: '简单集成', description: 'SDK快速集成，支持iOS和Android' },
  { icon: 'lucide:users', title: '实名手机', description: '确保使用实名手机号，防止恶意注册' }
]

const scenarios = [
  { icon: 'lucide:shopping-cart', title: '电商平台', description: '快速注册、一键登录、流畅购物', color: 'from-blue-500 to-cyan-500' },
  { icon: 'lucide:users', title: '社交应用', description: '新用户注册、快速登录、降低门槛', color: 'from-purple-500 to-pink-500' },
  { icon: 'lucide:smartphone', title: '生活服务', description: '外卖订餐、打车出行、快速下单', color: 'from-green-500 to-emerald-500' },
  { icon: 'lucide:landmark', title: '金融理财', description: '安全登录、快速开户、交易便捷', color: 'from-orange-500 to-red-500' },
  { icon: 'lucide:gamepad-2', title: '游戏娱乐', description: '快速登录、游戏体验、降低流失', color: 'from-indigo-500 to-blue-500' },
  { icon: 'lucide:graduation-cap', title: '在线教育', description: '学员注册、课程学习、一键登录', color: 'from-yellow-500 to-orange-500' }
]
</script>

<template>
  <div class="min-h-screen">
    <ProductHero
      title="闪验一键登录SDK"
      description="基于运营商网关认证，实现一键免密登录，提升用户体验，降低注册流失率，保障账号安全"
    />
    <section class="py-10 md:py-15 bg-gray-50">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="text-center mb-8 md:mb-10">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">产品优势</h2>
          <p class="text-lg text-gray-600">极速登录，提升用户体验</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          <div v-for="(advantage, index) in advantages" :key="index" class="bg-white rounded-2xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-all group">
            <div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
              <Icon :name="advantage.icon" class="w-7 h-7 text-white" />
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-3">{{ advantage.title }}</h3>
            <p class="text-gray-600 leading-relaxed">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </section>
    <section class="py-10 md:py-15 bg-white">
      <div class="mx-auto px-4 max-w-6xl">
        <div class="text-center mb-8 md:mb-10">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">行业应用场景</h2>
          <p class="text-lg text-gray-600">降低注册门槛，提升转化率</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          <div v-for="(scenario, index) in scenarios" :key="index" class="group relative bg-white rounded-2xl p-6 md:p-8 border-2 border-gray-100 hover:border-transparent hover:shadow-xl transition-all overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-10 transition-opacity" :class="scenario.color" />
            <div class="relative">
              <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-6 bg-gradient-to-br" :class="scenario.color">
                <Icon :name="scenario.icon" class="w-7 h-7 text-white" />
              </div>
              <h3 class="text-xl font-bold text-gray-900 mb-3">{{ scenario.title }}</h3>
              <p class="text-gray-600 leading-relaxed">{{ scenario.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA 部分 -->
    <CallToAction />
  </div>
</template>
